<template>
  <div>
    <!-- hash模式前面记得要加# -->
     <!-- <a href="#/home">点我去首页</a>
     <a href="#/login">点我去登录</a> -->

     <!-- history模式下，前面不要加# -->
     <!-- <a href="/home">点我去首页</a>
     <a href="/login">点我去登录</a> -->


     <!-- 使用声明式导航做跳转 -->
     <!-- 好处1： 不用再根据不同的模式写不同的路径 -->
     <!-- 统一就写path里定义好的路径，他会自动根据模式的不同决定帮你加#或者不加# -->
     <!-- 好处2： 谁被点会自动帮你加上两个类：
              router-link-exact-active
              router-link-active
          我们只要任选一个类，写好高亮的样式，就自动实现了高亮效果
      -->
     <router-link to="/home">点我去首页</router-link>
     <router-link to="/login">点我去登录</router-link>

    <router-view />
  </div>
</template>

<script>
export default {

}
</script>

<style>
.router-link-active {
  color: red;
}
</style>